<template>
  <div id="clear_work" style="width:100%;height:100%;"></div>
</template>

<script>
import {getroad} from 'config/api';
export default {
  data () {
    return {
      //  车辆保洁作业统计
      clear_work_obj: {
        title: {
          // text: '保洁作业'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['道路条数', '计划数量', '实际完成数量', '今日完成率']
        },
        grid: {
          top: '12%',
          left: '6%',
          right: '10%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series: [
          // 道路总里程  需要改为 道路条数，暂时注释
          {
            name: '道路条数',
            type: 'bar',
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true,   //  是否展示顶部数字
                  formatter: "{c}条",  //  数字后面添加单位
                  position: 'right',
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    fontFamily: '微软雅黑'
                  }
                }
              },
              subtextStyle: {
                color: '#000'  // 副标题文字颜色
              }
            }
          },
          {
            name: '计划数量',
            type: 'bar',
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true,   //  是否展示顶部数字
                  formatter: "{c}条",  //  数字后面添加单位
                  position: 'right',
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    fontFamily: '微软雅黑'
                  }
                }
              },
              subtextStyle: {
                color: '#000'  // 副标题文字颜色
              }
            }
          },
          {
            name: '实际完成数量',
            type: 'bar',
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true,   //  是否展示顶部数字
                  formatter: "{c}条",  //  数字后面添加单位
                  position: 'right',
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    fontFamily: '微软雅黑'
                  }
                }
              },
              subtextStyle: {
                color: '#000'  // 副标题文字颜色
              }
            }
          },
          {
            name: '今日完成率',
            type: 'bar',
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true,   //  是否展示顶部数字
                  formatter: "{c}%",  //  数字后面添加单位
                  position: 'right',
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    fontFamily: '微软雅黑'
                  }
                }
              },
              subtextStyle: {
                color: '#000'  // 副标题文字颜色
              }
            }
          }
        ]
      }
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.clearWork();  //  保洁作业统计
    });
  },
  methods: {
  //  车辆保洁作业
    clearWork () {
      getroad().then((res) => {
        let datas = res.data.data;
        for (let key in datas) {
          if (datas.hasOwnProperty(key)) {
            let element = datas[key];
            this.clear_work_obj.yAxis.data.push(element.type);
            this.clear_work_obj.series[0].data.push(element.roadMiles);
            this.clear_work_obj.series[1].data.push(element.planAmount);
            this.clear_work_obj.series[2].data.push(parseInt(element.finishedAmount));
            //  完成率
            this.clear_work_obj.series[3].data.push((element.finishedAmount / element.planAmount * 100).toFixed(2));
          }
        }
        let myChart = echarts.init(document.getElementById("clear_work"), 'dark'); //  获取Canvas
        myChart.setOption(this.clear_work_obj); //  插入数据
        //  Canvas自适应
        window.addEventListener('resize', function () {
          myChart.resize();
        });
      });
    }
  }
};
</script>